.Page{
    padding: 5px;
}
.top{
    width: calc(100vw-10px);
    height: 10vh;
    display: flex;
    /* background-color: aqua; */
    justify-content: space-between;
    font-size: 40px;
    line-height: 10vh;
}
.top div{
    flex: 1;
}
.top_middle span{
    margin: 0 10px;
}
.top_add span{
    float: right;
}
.cate{
    width: calc(100vw-10px);
    display: flex;
    height: 10vh;
    /* line-height: 7.5vh; */
}
.cate > div{
    height: 100%;
    width: 100%;
    flex: 1;
    text-align: center;
    font-size: 20px;
}
.cate>div>div:first-child{
    height: 7vh;
    line-height: 7vh;
}
.cate>div>div:last-child{
    height :3vh;
    line-height: 3vh;
    font-size: 25px;
}
.cate_img{
    background-image:url(https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B6%88%E6%81%AF/u4244.svg);
    width: 60%;
    height: 60px;
    border-radius: 7vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cate_Icon{
    max-width: 100px;
    height: auto;
}
.middle{
    height: calc(90vh-5px-70px);
    overflow: auto;
    margin-top: 10vh;
}
.item{
    width: calc(100vw-10px);
    height: 10vh;
    display: flex;
}
.item_left{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item_middle{
    flex: 4;
}
.item_name{
    height: 50%;
    font-size: 25px;
    font-weight: 500;
    line-height: 7vh;
}
.item_message{
    height: 50%;
    line-height: 3vh;
    font-size: 20px;
} 
.item_right{
    flex: 1;
}
.avatar{
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    margin: auto;
}
.item_prompt{
    height: 50%;
    line-height: 7vh;
    font-size: 25px;
    text-align: center;
}
.item_time{
    height: 50%;
    font-size: 25px;
    line-height: 3vh;
    text-align: center;
}
.item_time div{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    color: white;
    background-color: red;
}
